@import "../base/deploy";//配置
#framework{
	//云平台样式
.default-color(@head-h , @primary-color , @left-color , @left-active-color, @logo-color , @head-color , @head-active-color , @bg-color , @foot-color){
	.framework-head{
		height: @head-h;
		background-color:@head-color;
		border-bottom-color: darken(@head-color, 20%);
		.navmore{
			.bar{
				height: (@head-h + 1px);
				width: @head-h;
				line-height: @head-h;
				#color > .bg-color(@logo-color);
				.iconfont{
					font-size: (@head-h * 0.5);
				}
				&:hover{
					#color > .bg-color(darken(@logo-color, 10%));
				}
			}
			.navbox{
				#color > .bg-color(darken(@logo-color, 10%));
				.m-magnet{
					li{
						a{
							#color > .bg-color(darken(@logo-color, 10%));
							&:hover{
								#color > .bg-color(@head-active-color);
							}
						}
					}
				}
			}
		}
		.title{
			height:(@head-h + 1px);
			width: (200px - @head-h);
			#color > .bg-color(@logo-color);
		}
		.nav{
			.m-topmenu{
				#menu > .topmenu-size(@head-h);
				#menu > .topmenu-skin(default, @head-color, @head-active-color);
			}
		}
		.addnav{
			width: @head-h;
			height: @head-h;
			line-height: @head-h;
			#color > .bg-color(@head-color);
			.iconfont{
				font-size: (@head-h * 0.5)!important;
			}
		}
		.u-group{
				#u-group > .group-size(@head-h);
				#u-group > .group-skin(solid, @head-color);
				.u-btn{
					padding: 0 10px;
				}
			}
		.searchbox{
			#u-group > .group-size((@head-h - 12px));
			margin-top: 6px;
			.item-r{
				*margin-left:-9px;
				//margin-right:-2px;
				*padding: 0 4px!important;
				*height: (@head-h - 10px);
			}
		}
		
	}
	.framework-center{
		iframe{
			#color > .bg-color(@bg-color);
		}
		.toolbox{
			#color > .bg-color(@primary-color);
			.u-btn{
				#u-btn > .u-btn-skin(lighten(@primary-color, 10%))
			}
			.u-input{
				#input > .u-input-skin(darken(@primary-color, 8%));
			}
			.u-group{
				#u-group > .group-skin(solid, darken(@primary-color, 8%));
			}
			.searchlist{
				li{
					a{
						#color > .bg-color(lighten(@primary-color, 10%));
						&:hover{
							#color > .bg-color(lighten(@primary-color, 5%));
						}
					}
				}
			}
			.informationlist{
				li{
					#color > .bg-color(lighten(@primary-color, 10%));
					&:hover{
						#color > .bg-color(lighten(@primary-color, 5%));
					}
				}
			}
		}
	}
	.framework-left{
		#color > .bg-color(@left-color);
		.u-btn{
			#u-btn > .u-btn-skin(@left-color);
		}
		#userboxbar{
			background-color: lighten(@left-color,5%);
		}
		.userbox{
			background-color: lighten(@left-color,5%);
			.m-combo{
					#m-combo > .combo-skin(lighten(@left-color,5%));
				}
			.post{
				.u-btn{
					.xs;
				}
			}
		}
		.m-sidemenu{
			#m-sidemenu > .sidemenu-color(style1, @left-color, @left-active-color)
		}
	}
	.framework-foot{
		#color > .bg-color(@foot-color);
	}
	.lock{
		#color > .bg-color(@primary-color);
		.u-btn{
			#u-btn > .u-btn-skin(lighten(@primary-color, 10%));
		}
		.u-input{
			#input > .u-input-skin(darken(@primary-color, 8%));
		}
	}
}
	//普通框架
.normal-color(@head-h , @primary-color , @left-color , @left-active-color, @logo-color , @head-color , @head-active-color , @bg-color , @foot-color){
	.framework-head{
		height: @head-h;
		background-color:@head-color;
		border-bottom-color: darken(@head-color, 20%);
		.navmore{
			.bar{
				height: @head-h;
				width: @head-h;
				line-height: @head-h;
				#color > .bg-color(@logo-color);
				.iconfont{
					font-size: (@head-h * 0.5);
				}
				&:hover{
					#color > .bg-color(darken(@logo-color, 10%));
				}
			}
			.navbox{
				#color > .bg-color(darken(@logo-color, 10%));
				.m-magnet{
					li{
						a{
							#color > .bg-color(darken(@logo-color, 10%));
							&:hover{
								#color > .bg-color(@head-active-color);
							}
						}
					}
					
				}
			}
		}
		.title{
			height:@head-h;
			width: 200px;
			#color > .bg-color(@logo-color);
		}
		.nav{
			.m-topmenu{
				#menu > .topmenu-size(@head-h);
				#menu > .topmenu-color(@primary-color, @head-active-color);
			}
		}
		.addnav{
			width: @head-h;
			height: @head-h;
			line-height: @head-h;
			#color > .bg-color(@head-color);
			.iconfont{
				font-size: (@head-h * 0.5)!important;
			}
		}
		.u-group{
				#u-group > .group-size(@head-h);
				#u-group > .group-skin(solid, @head-color);
				.u-btn{
					padding: 0 10px;
				}
			}
		.searchbox{
			#u-group > .group-size((@head-h - 12px));
			margin-top: 6px;
			.item-r{
				*margin-left:-9px;
				//margin-right:-2px;
				*padding: 0 4px!important;
				*height: (@head-h - 10px);
			}
		}
		
	}
	.framework-center{
		iframe{
			#color > .bg-color(@bg-color);
		}
		.toolbox{
			#color > .bg-color(@primary-color);
			.u-btn{
				#u-btn > .u-btn-skin(lighten(@primary-color, 10%))
			}
			.u-input{
				#input > .u-input-skin(darken(@primary-color, 8%));
			}
			.u-group{
				#u-group > .group-skin(solid, darken(@primary-color, 8%));
			}
			.searchlist{
				li{
					a{
						#color > .bg-color(lighten(@primary-color, 10%));
						&:hover{
							#color > .bg-color(lighten(@primary-color, 5%));
						}
					}
				}
			}
			.informationlist{
				li{
					#color > .bg-color(lighten(@primary-color, 10%));
					&:hover{
						#color > .bg-color(lighten(@primary-color, 5%));
					}
				}
			}
		}
	}
	.framework-left{
		#color > .bg-color(@left-color);
		.u-btn{
			#u-btn > .u-btn-skin(@left-color);
		}
		.userbox{
			.m-combo{
					#m-combo > .combo-skin(@left-color);
				}
			.post{
				.u-btn{
					.xs;
				}
			}
		}
		.m-sidemenu{
			#m-sidemenu > .sidemenu-color(style1, @left-color, @left-active-color)
		}
	}
	.framework-foot{
		#color > .bg-color(@foot-color);
	}
	.lock{
		#color > .bg-color(@primary-color);
		.u-btn{
			#u-btn > .u-btn-skin(lighten(@primary-color, 10%));
		}
		.u-input{
			#input > .u-input-skin(darken(@primary-color, 8%));
		}
	}
}	
	//简洁版样式
.simple-color(@head-h , @primary-color , @left-active-color, @logo-color , @head-color , @head-active-color , @bg-color , @foot-color){
	.framework-head{
		height: @head-h;
		background-color:@head-color;
		border-bottom-color: darken(@head-color, 20%);
		.navmore{
			.bar{
				height: @head-h;
				width: @head-h;
				line-height: @head-h;
				#color > .bg-color(lighten(@logo-color,8%)); 
				.iconfont{
					font-size: 23px;
					color:lighten(@logo-color, 70%);
				}
				&:hover{
					#color > .bg-color(lighten(@logo-color,15%));
				}
			}
			.navbox{
				#color > .bg-color(lighten(@logo-color, 8%));
				.m-magnet{
					li{
						a{
							#color > .bg-color(lighten(@logo-color, 8%));
							&:hover{
								#color > .bg-color(lighten(@logo-color, 75%));
								color:lighten(@logo-color, 8%);
							}
						}
					}
					
				}
			}
		}
		.title{
			height:@head-h;
			width: (200px - @head-h);
			#color > .bg-color(@logo-color);
			//margin-right: 15px;
		}
		.nav{
			.m-topmenu{
				#menu > .topmenu-size(@head-h);
				#menu > .topmenu-color(@primary-color, @head-active-color);
				li{
					ul{
						li{
							.arrow{
								display: none;
							}
						}
					}
				}
			}
		}
		.addnav{
			width: @head-h;
			height: @head-h;
			line-height: @head-h;
			#color > .bg-color(@head-color);
			.iconfont{
				font-size: (@head-h * 0.5)!important;
			}
		}
		.u-group{
				#u-group > .group-size(@head-h);
				#u-group > .group-skin(solid, @head-color);
				.u-btn{
					padding: 0 10px;
					line-height: (@head-h - 10);
					height: @head-h;
				}
			    .item{
					border-color: @head-color;
				}
				.m-combo{
					.m-menu{
						#menu > .menu-skin(#ffffff);
						animation: fadeInDown 0.3s;
						border:none!important;
						margin-top: 0px!important;
						border-radius: 0 0 0 5px;
						overflow: hidden;
						box-shadow: -3px 3px 3px rgba(0,0,0,.1);
						li{
							a{
								color:@primary-color;
								&:hover{
									color:@primary-color;
								}
							}
						}
					}
				}
			   
			}
		.searchbox{
			#u-group > .group-size((@head-h - 12px));
			margin-top: 6px;
			.item-r{
				*margin-left:-9px;
				//margin-right:-2px;
				*padding: 0 4px!important;
				*height: (@head-h - 10px);
			}
		}
	}
	.framework-center{
		iframe{
			#color > .bg-color(@bg-color);
		}
		.toolbox{
			#color > .bg-color(darken(@primary-color, 10%));
			.u-btn{
				#u-btn > .u-btn-skin(@primary-color)
			}
			.u-input{
				#input > .u-input-skin(darken(@primary-color, 13%));
			}
			.u-group{
				#u-group > .group-skin(solid, darken(@primary-color, 13%));
			}
			.searchlist{
				li{
					a{
						#color > .bg-color(lighten(@primary-color, 10%));
						&:hover{
							#color > .bg-color(lighten(@primary-color, 5%));
						}
					}
				}
			}
			.informationlist{
				li{
					#color > .bg-color(lighten(@primary-color, 10%));
					&:hover{
						#color > .bg-color(lighten(@primary-color, 5%));
					}
				}
			}
		}
	}
	.framework-left{
		border-width: 0; 
		#color > .bg-color(@left-color);
		.u-btn{
			#u-btn > .u-btn-skin(@left-color);
		}
		#userboxbar{
			background-color: lighten(@left-color,5%);
		}
		.userbox{
			background-color: lighten(@left-color,5%);
			.m-combo{
					#m-combo > .combo-skin(lighten(@left-color,5%));
				}
			.post{
				.u-btn{
					.xs;
				}
			}
		}
		.navname{
			border-bottom-color: darken(@left-color,7%);
			box-shadow: 0 1px 0 lighten(@left-color,4%);
			.title{
				//color: lighten(@left-color,40%)!important;
				font-size: 12px;
			}
			.set{
				font-size: 16px;
				cursor: pointer;
			}
		}
		.m-sidemenu{
			#m-sidemenu > .sidemenu-color(style1, @left-color, @left-active-color);
			li{
				border-bottom-style:dotted;
				border-bottom-color: lighten(@left-color,7%);
				border-bottom-width: 1px!important;
				a{
					border-bottom-style:dotted;
					border-bottom-color: darken(@left-color,10%);
					//margin-bottom: 1px;					
				}
			}
			
		}
		.m-prompt{
			box-sizing: border-box;
			padding:10px 3px 20px 3px;
			li{
				box-sizing: border-box;
				height: 30px;
				padding: 2px;
				float: left;
				display: block;
				width: 50%;
				position: relative;
				.u-point{
					right: -3px;
					top: -2px;
					width: 14px;
					height: 14px;
					font-size: 12px;
					line-height: 14px;
					position: absolute;
				}
				a{
					height: 26px;
					box-sizing: border-box;
					display: block;
					width: 100%;
					line-height: 24px;
					font-size: 12px;
					padding-left: 30px;
					position: relative;
					color: lighten(@left-color,30%);
					border:1px solid lighten(@left-color,4%);
					border-radius: 3px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					&:hover{
						background-color: lighten(@left-color,7%);
						border:1px solid lighten(@left-color,10%);
						font-weight: bold;
						color:#fff;
					}
					.iconfont{
						width: 26px;
						height: 26px;
						position: absolute;
						z-index: 1000;
						top: 0;
						left: 0;
						text-align: center;
						line-height: 26px;
						background-color: lighten(@left-color,4%);
						color: #fff;
						
					}
					
				}
			}
		}
		.copyright{
			padding: 10px;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: lighten(@left-color,4%);
			box-shadow: 0 -1px 0 darken(@left-color,7%);
			color: lighten(@left-color,15%) !important;
			* {
				font-size:12px !important;
			}
			}
		
	}
	.framework-foot{
		#color > .bg-color(@foot-color);
	}
	.lock{
		#color > .bg-color(@primary-color);
		.u-btn{
			#u-btn > .u-btn-skin(lighten(@primary-color, 10%));
		}
		.u-input{
			#input > .u-input-skin(darken(@primary-color, 8%));
		}
	}
}
	
	//传统模式类型三
.tradition-color(@head-h , @primary-color , @left-color , @left-active-color, @logo-color , @head-color , @head-active-color , @bg-color , @foot-color){
	.framework-head{
		height: (@head-h * 2);
		background-color:@head-color;
		border-bottom-color: darken(@head-color, 20%);
		.banner{
			height:@head-h;
			background-color:@head-color;
			clear: both;
			.navmore{
			.bar{
				height: (@head-h + 1px);
				width: @head-h;
				line-height: @head-h;
				#color > .bg-color(@head-active-color);
				.iconfont{
					font-size: (@head-h * 0.5);
				}
				&:hover{
					#color > .bg-color(darken(@head-active-color, 10%));
				}
			}
			.navbox{
				#color > .bg-color(darken(@logo-color, 10%));
				.m-magnet{
					li{
						a{
							#color > .bg-color(darken(@logo-color, 10%));
							&:hover{
								#color > .bg-color(@head-active-color);
							}
						}
					}
					
				}
			}
		}
		    .title{
			height:(@head-h + 1px);
			width: (200px - @head-h);
			#color > .bg-color(@logo-color);
		}
			.toolbar{
				#u-group > .group-size(@head-h);
				#u-group > .group-skin(solid, @head-color);
				.u-btn{
					padding: 0 10px;
				}
				.item{
					border-color: @head-color;
				}
				.m-combo{
					.m-menu{
						#menu > .menu-skin(darken(@head-color, 10%));
					}
				}
			}
			.searchbox{
			#u-group > .group-size((@head-h - 12px));
			margin-top: 6px;
			.item-r{
				*margin-left:-9px;
				*padding: 0 4px!important;
				*height: (@head-h - 10px);
				}
			}
		}
		
		.nav{
			height:@head-h;
			background-color:lighten(@head-color, 5%);
			//top:@head-h!important;
			.m-topmenu{
				#menu > .topmenu-size(@head-h);
				#menu > .topmenu-skin(solid, lighten(@head-color, 5%));
			}
		}
		.addnav{
			width: @head-h;
			height: @head-h;
			line-height: @head-h;
			#color > .bg-color(@head-color);
			.iconfont{
				font-size: (@head-h * 0.5)!important;
			}
		}
		
		
		
		
	}
	.framework-center{
		iframe{
			#color > .bg-color(@bg-color);
		}
		.toolbox{
			#color > .bg-color(@primary-color);
			.u-btn{
				#u-btn > .u-btn-skin(lighten(@primary-color, 10%))
			}
			.u-input{
				#input > .u-input-skin(darken(@primary-color, 8%));
			}
			.u-group{
				#u-group > .group-skin(solid, darken(@primary-color, 8%));
			}
			.searchlist{
				li{
					a{
						#color > .bg-color(lighten(@primary-color, 10%));
						&:hover{
							#color > .bg-color(lighten(@primary-color, 5%));
						}
					}
				}
			}
			.informationlist{
				li{
					#color > .bg-color(lighten(@primary-color, 10%));
					&:hover{
						#color > .bg-color(lighten(@primary-color, 5%));
					}
				}
			}
		}
	}
	.framework-left{
		#color > .bg-color(@left-color);
		.u-btn{
			#u-btn > .u-btn-skin(@left-color);
		}
		.userbox{
			.m-combo{
					#m-combo > .combo-skin(@left-color);
				}
			.post{
				.u-btn{
					.xs; 
				}
			}
		}
		.m-sidemenu{
			#m-sidemenu > .sidemenu-color(style1, @left-color, @left-active-color)
		}
	}
	.framework-foot{
		#color > .bg-color(@foot-color);
	}
	.lock{
		#color > .bg-color(@primary-color);
		.u-btn{
			#u-btn > .u-btn-skin(lighten(@primary-color, 10%));
		}
		.u-input{
			#input > .u-input-skin(darken(@primary-color, 8%));
		}
	}
}
}



